<template>
  <div class="left">
    <div class="search-box">
      <el-select class="sbox-select" v-model="addressType" placeholder="请选择">
        <el-option
          v-for="item in addressTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <input v-model="address" />
      <button @click="search()">
        <i class="sbox-button-i el-icon-search"></i>
      </button>
    </div>
    <div class="search-result-box" v-show="resultBoxVisiable">
      <div>
        <img src="/data/icon/wei.png"/>
        <p>伊春有限公司尾矿库</p>
      </div>
      <ul>
        <li
          v-for="(item,index) in searchResultList"
          :key="index"
          @click="showInfo(item)"
        >{{item.name}}</li>
      </ul>
    </div>
    <div class="tip-box" v-show="tipBoxVisiable">
      <p>返回'{{address}}'的搜索结果</p>
    </div>
    <div class="info-box" v-show="infoBoxVisiable">
      <span class="info-box-header">
        <i class="minus el-icon-minus" @click="hideContent()" v-show="infoBoxTypeVisiable"></i>
        <i class="minus el-icon-full-screen" @click="extendContent()" v-show="!infoBoxTypeVisiable"></i>
        <i class="close el-icon-close" @click="closeInfoBox()"></i>
        <p class="company-name">{{infoContent.one}}</p>
        <p class="address-name" >{{infoContent.two}}</p>
        <p class="level">{{infoContent.three}}</p>
      </span>
      <div class="info-box-main" v-if="infoBoxMainVisiable">
        <div class="info-box-type" v-show="infoBoxTypeVisiable">
          <ul>
            <li v-for="(item,index) in contentTypeList " :key="index" @click="connectRight(item)">{{item}}</li>
          </ul>
        </div>
        <div class="info-box-content" v-show="infoBoxContentVisiable">
          <div class="content-item">
            <span>
              <p>设计容量</p>
              <p>(万立方米)</p>
            </span>
            <p>3.2198617</p>
          </div>
          <div class="content-item">
            <span>
              <p>已填容量</p>
              <p>(万立方米)</p>
            </span>
            <p>0.3908878</p>
          </div>
          <div class="zhucun content-item">
            <span>
              <p>贮存废物</p>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
            </span>
            <p></p>
          </div>
          <div class="address">
            <i class="el-icon-location"></i>
            <p>铁力市铁力林业局鹿鸣林场生活区伊春鹿鸣矿业有限公司</p>
          </div>
          <div class="next" @click="showMoreInfo()">
            <p>查看关联企业信息</p>
            <i class="el-icon-arrow-down" v-show="!moreInfoVisiable"></i>
            <i class="el-icon-arrow-up" v-show="moreInfoVisiable"></i>
          </div>
        </div>
        <div class="info-box-more" v-show="moreInfoVisiable">
          <p class="company-name">伊春鹿鸣矿业有限公司</p>
          <p class="work-name">钨矿采选</p>
          <div class="more-item kuang produce">
            <p>主要产品</p>
            <p>主要产品主要产品主要产品主要产品主要产品主要产品主要产品主要产品主要产品</p>
          </div>
          <div class="more-item kuang cailiao">
            <p>主要原辅材料</p>
            <p></p>
          </div>
          <div class="more-item people">
            <i class="el-icon-s-custom"></i>
            <p>王海路</p>
            <i class="el-icon-phone"></i>
            <p>18304581555</p>
          </div>
          <div class="address">
            <i class="el-icon-location"></i>
            <p>铁力市铁力林业局鹿鸣林场生活区伊春鹿鸣矿业有限公司</p>
          </div>
        </div>
      </div>
      <div class="info-box-point" v-show="chartVisiable">
        <div class="info">
          <div class="item">
            <p class="name">当前河道流量</p>
            <span>
              <p>35.5</p>
              <p>立方米/秒</p>
            </span>
          </div>
          <div class="item">
            <p class="name">当前水位</p>
            <span>
              <p>144.59</p>
              <p>米</p>
            </span>
          </div>
        </div>
        <div class="chart">
          <el-radio-group v-model="chartDate">
            <el-radio :label="10">最近10天</el-radio>
            <el-radio :label="20">最近20天</el-radio>
            <el-radio :label="30">最近30天</el-radio>
          </el-radio-group>
        </div>
        <div id="chart-content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations ,mapActions} from 'vuex'
import axios from 'axios'
export default {
  data() {
    return {
      searchResultList: [
        { name: "尾矿库" },
        { name: "铁力市铁力林业局鹿鸣林场生活区伊春鹿鸣" },
        { name: "伊春鹿鸣矿业有限公司" },
      ],
      addressTypeList: [{ label: "尾矿库", value: "weikuangku" }],
      addressType: null,
      address: null,
      tipBoxVisiable: false,
      infoBoxVisiable: false,
      //infoBoxMainVisiable: false,
      contentTypeList: ["详细信息", "周边查询", "所在区县", "污染路径"],
      moreInfoVisiable: false,
      infoBoxTypeVisiable: false,
      infoBoxContentVisiable: false,
      resultBoxVisiable: false,
      chartDate: 10,
      x:50//用于绕点自转
      //chartVisiable: false,
    };
  },
  
  computed:{
    ...mapState("windowInfo",{
        chartVisiable:"chartVisiable",
        infoBoxMainVisiable:'infoBoxMainVisiable',
        infoContent:"infoContent"
    }),
  },
  watch:{
    chartVisiable:{
      handler(){
        this.initChart();
      },
      deep:true
    }
  },
  mounted() {
    if (this.chartVisiable) {
      this.initChart();
    }
  },
  methods: {
    ...mapMutations("windowInfo", { 
      changeInfoBoxContent: "changeInfoBoxContent",
      changeTabName:"changeTabName",
      changeInfoBoxMainVisiable:"changeInfoBoxMainVisiable" 
    }),
    connectRight(item){
      if(item==="周边查询"){
        viewer.entities.removeById("yili")
        this.removeInit();
        this.addZhoubian();
        this.$cp.flyTo(128.560531140173,47.3229160553105,61638,0.011780128721354366,-1.5653688632814107,0)
      }else if(item==="所在区县"){
        viewer.entities.removeById("cirle")
        this.removeInit();
        axios.get('./data/伊春市.json').then((res)=>{
            res.data.features.forEach((item,index)=>{
                if(item.properties.name==="铁力市"){
                    let arr1 = []
                    item.geometry.coordinates[0][0].forEach(itemc=>{
                        arr1.push(itemc[0],itemc[1]);
                    })
                    this.$cp.addPloygon('yili',arr1)
                }
            })
        })
        this.$cp.flyTo(128.5402501789749,46.96761416334732,249378,0.01178012893730962,-1.5653654868735796,0)
      }else if(item==="污染路径"){
        this.changeTabName("second")
        
        viewer.entities.removeById("cirle")
        axios.get('./data/污染河段.json').then(res=>{
            let datas = res.data.coordinates;
            datas.forEach((element ,index)=> {
               this.$cp.addPloygonLine("wuran"+index,[].concat.apply([], element), Cesium.Color.ORANGE)
            });
        })

        viewer.entities.removeById("weikuang")
        this.$cp.addBillboard( "hui" , [127.772982,47.038839], "./data/icon/hui.png" , "汇合点" , "leftClick", this.entityLeftClick) 
        this.$cp.addBillboard1( "qidian" , [128.546129,47.344913], "./data/icon/qi.png" , "红旗岗沟" , "leftClick", this.entityLeftClick) 
        this.$cp.flyTo(128.33172801472128,43.86324261058459,220030,0.027708417074848057,-0.6707853129911578,6.283064103418923)
      }else if(item==="详细信息"){
        viewer.entities.removeById("weikuang")
        viewer.entities.removeById("yili")
        viewer.entities.removeById("qidian");
        viewer.entities.removeById("hui");
        circleGroup.clear();
      }
    },
    addZhoubian(){
      var greenCircle = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(128.546129,47.344913, 100.0),
        id:"cirle",
        ellipse: {
          semiMinorAxis: 15000.0,
          semiMajorAxis: 15000.0,
          height: 100.0,
          material: Cesium.Color.GREEN.withAlpha(.3),
          outline: true, // height must be set for outline to display
        },
      });
    },
    removeInit(){
      circleGroup.clear();
      viewer.scene.postRender.removeEventListener(this.pointRoll);
    },
    hideContent() {
      this.infoBoxTypeVisiable = false;
      this.infoBoxContentVisiable = false;
      this.moreInfoVisiable = false;
    },
    extendContent() {
      this.infoBoxTypeVisiable = true;
      this.infoBoxContentVisiable = true;
      this.moreInfoVisiable = true;
    },
    closeInfoBox() {
      this.infoBoxVisiable = false;
    },
    showInfo(value) {
      //点击搜索结果
      this.changeInfoBoxMainVisiable(true);
      this.resultBoxVisiable = false;
      this.tipBoxVisiable = true;
      this.infoBoxVisiable = true;
      this.infoBoxTypeVisiable = true;
      this.infoBoxContentVisiable = true;
      this.$cp.addBillboard( "weikuang" , [128.546129,47.344913], "./data/icon/wei.png" , "伊春鹿鸣矿业有限公司尾矿库" , "moveMove", this.entityLeftClick) 
      //增加小框
      this.addCircleGroup();
      this.$cp.flyTo(128.5525817362862,47.122131797089054,25150,6.283185307179576,-0.7854077219036455,6.283185307179586)
      // 绕点自转
      viewer.scene.postRender.addEventListener(this.pointRoll);
    },
    pointRoll(){
      let that = this;
      const center = Cesium.Cartesian3.fromDegrees(128.546129,47.344913,10000);
      let heading = Cesium.Math.toRadians(50.0);
      const pitch = Cesium.Math.toRadians(-20.0);
      const range = 50000.0;
      this.x+=0.05;
      heading = Cesium.Math.toRadians(this.x);
      viewer.zoomTo(viewer.entities.getById("weikuang"), new Cesium.HeadingPitchRange(heading,pitch,range))
    },
    addCircleGroup(){
      window.circleGroup = new GV.GraphicGroup();
      viewer.graphicLayer.add(circleGroup);
      let circleScan1 = new GV.SpreadGraphic({
          spreadColor: 'rgba(255, 0.0, 0.0 ,1)',
          position: new GV.GeoPoint(128.546129,47.344913),
          radius: 3000,
          duration: 3000,
      });
      circleGroup.add(circleScan1);
      let circleScan2 = new GV.SpreadGraphic({
          spreadColor: 'rgba(255, 0.0, 0.0 ,1)',
          position: new GV.GeoPoint(128.546129,47.344913),
          radius: 6000,
          duration: 2000,
      });
      circleGroup.add(circleScan2);
      let circleScan3 = new GV.SpreadGraphic({
          spreadColor: 'rgba(255, 0.0, 0.0 ,1)',
          position: new GV.GeoPoint(128.546129,47.344913),
          radius: 9000,
          duration: 1000,
      });
      circleGroup.add(circleScan3);
    },
    entityLeftClick(entity) {
      //this.addBoundInfoBox(entity.position._value, "gzinfoBox")
      //this.changeInfoBoxContent(entity.label.text)
      this.$cp.currentEntity = entity;
      entity.label.show=true
    },
    //点击显示详细信息
    addBoundInfoBox(positionValue, elementId) {
			const oneDiv = window.document.getElementById(elementId)
			oneDiv.style.display = 'block'
			this.preRenderListener = viewer.scene.preRender.addEventListener(function() {
				let elWidth = oneDiv.offsetWidth
				let elHeight = oneDiv.offsetHeight // + 60
				const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
				let domPosition = positionValue
				const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
				if (Cesium.defined(canvasPosition)) {
					// 根据元素宽高及当前点屏幕坐标进行偏移
					oneDiv.style.top = canvasPosition.y - elHeight * 1.5 + 'px'
					oneDiv.style.left = canvasPosition.x - elWidth / 2 + 'px'
				}
			})
    },
    //关闭广告牌
    hiddenInfoBox(event) {
			//Object.keys
			event.currentTarget.parentNode.parentNode.parentNode.parentNode.style.display = 'none'
    },
    //移除自定义信息框
		removeBoundInfoBox() {
			// // 移除元素
			// if (oldBoundInfoBox) {
			// 	oldBoundInfoBox.style.display = 'none'
			// 	oldBoundInfoBox = null
			// }
			// 移除监听事件
			if (this.preRenderListener) {
				this.preRenderListener()
				this.preRenderListener = null
			}
		},
    showMoreInfo() {
      this.moreInfoVisiable = !this.moreInfoVisiable;
    },
    search() {
      this.resultBoxVisiable = true;
    },
    initChart() {
      var myChart = this.$echarts.init(
        document.getElementById("chart-content")
      );
      var option = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2020-07-29",
            "2020-07-30",
            "2020-07-31",
            "2020-08-01",
            "2020-08-02",
            "2020-08-03",
            "2020-08-04",
            "2020-08-05",
            "2020-08-06",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
          min: 0,
          max: 250,
          interval: 50,
        },
        series: [
          {
            name: "警戒水位",
            type: "line",
            data: [149.25],
            markLine: {
              label: {
                show: true,
                position: "insideMiddleBottom",
                formatter: "警戒水位149.25米",
                textStyle: {
                  fontSize: 16,
                  color: "#c595d0",
                },
              },
              data: [{ type: "average", name: "平均值" }],
              lineStyle: {
                color: "#c78cd4",
              },
            },
          },
          {
            name: "水位",
            type: "line",
            data: [
              144.19,
              144.23,
              144.32,
              144.45,
              144.16,
              144.12,
              144.11,
              144.26,
              144.27,
              144.3,
            ],
            markPoint: {
              symbolSize: 60,
              data: [
                { type: "max", name: "最高" },
                { type: "min", name: "最低" },
              ],
              label: {
                formatter: "{b}\n{c}米",
                color: "#fff",
                textBorderColor: "#c78cd4",
                fontSize: 16,
              },
              itemStyle: {
                color: "#c78cd4",
              },
            },
            lineStyle: {
              color: "#c78cd4",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="stylus">
@import '../../../assets/css/varibles.styl';
.left {
  position: absolute;
  left: vw(60);
  top: vw(30);
  z-index: 3;
  .search-box {
    display: flex;
    justify-content: center;
    .sbox-select {
      .el-input__inner {
        width: vw(120);
        height: vh(48);
        border-radius: 2px;
        border-right: 1px solid;
      }
    }
    input {
      width: vw(280);
      height: vh(48);
      border: none;
      padding: 0;
      outline: none;
      border-radius: 2px;
      font-size: vh(16);
      color: black;
      padding-left: vw(25);
    }
    button {
      width: vw(50);
      height: vh(48);
      border: none;
      outline: none;
      cursor: pointer;
      background-color: rgb(0, 171, 197);
      border-radius: 2px;
      font-size: vh(18);
      border: 0.1px solid white;
      position: relative;
      right: 50px;
    }
  }
  .search-result-box {
    width: vw(425);
    height: vh(200);
    background-color: white;
    position: absolute;
    top: vh(52);
    color: black;
    div {
      margin: vw(20) vw(20) vw(10) vw(50);
      display: flex;
      align-items: center;
      cursor: pointer;
      color: rgb(0, 171, 197);
      img {
        width: vw(30);
        height: vh(30);
        margin-right: vw(20);
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      height: vh(100);
      padding-left: vw(100);
      cursor: pointer;
      li:hover {
        background-color: rgb(0, 171, 197);
      }
    }
  }
  .tip-box {
    position: absolute;
    top: vh(70);
    display: flex;
    align-items: center;
    justify-content: center;
    width: vw(425);
    height: vh(50);
    background-color: white;
    color: rgb(0, 171, 197);
    border-radius: 2px;
  }
  .info-box {
    position: absolute;
    top: vh(142);
    display: flex;
    flex-direction: column;
    width: vw(425);
    border-radius: 2px;
    .info-box-header {
      width: 100%;
      min-height: vh(150);
      background-color: rgb(0, 172, 196);
      border-radius: 2px;
      .minus {
        position: absolute;
        left: vw(360);
        top: vh(20);
        font-weight: 1000;
        cursor: pointer;
      }
      .close {
        position: absolute;
        left: vw(390);
        top: vh(20);
        font-weight: 1000;
        cursor: pointer;
      }
      .company-name {
        margin: vw(20) vw(10) vw(10) vw(20);
        font-size: vw(20);
      }
      .address-name {
        margin: vw(10) vw(10) vw(10) vw(20);
        font-size: vw(20);
      }
      .level {
        margin: vw(10) vw(10) vw(10) vw(20);
      }
    }
    .info-box-main {
      width: 100%;
      height: vh(730);
      overflow: auto;
      overflow-y: overlay;
      .info-box-type {
        width: 100%;
        height: vh(60);
        background-color: white;
        color: rgb(0, 172, 196);
        border-bottom: 1px solid #CFCFCF;
        cursor: pointer;
        ul {
          display: flex;
          justify-content: space-between;
          padding: vw(20) vw(20) vw(20) vw(20);
          li {
            padding-right: vw(20);
            border-right: 1px solid #CFCFCF;
          }
          :last-child {
            border: none;
            padding-right: 0;
          }
        }
      }
      .info-box-content {
        width: 100%;
        background-color: white;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        min-height: vh(425);
        border-bottom: 1px solid #CFCFCF;
        .content-item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: rgb(231, 244, 254);
          border: 1px solid rgb(0, 172, 196);
          border-radius: 8px;
          width: 90%;
          height: vh(70);
          span {
            p {
              color: black;
              font-size: vw(16);
              margin-bottom: vh(10);
              text-align: center;
            }
          }
          p {
            color: rgb(0, 172, 196);
            font-size: vw(25);
          }
        }
        .zhucun {
          height: vh(50);
        }
        .address {
          color: black;
          width: 90%;
          height: vh(70);
          display: flex;
          line-height: 25px;
          align-items: flex-start;
          i {
            width: vw(30);
            height: vh(30);
            border: none;
            display: flex;
            align-items: center;
          }
        }
        .next {
          color: rgb(0, 172, 196);
          width: 90%;
          height: vh(40);
          display: flex;
          justify-content: flex-end;
          cursor: pointer;
          margin: - vh(20);
        }
      }
      .info-box-more {
        color: black;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        min-height: vh(450);
        .company-name {
          font-size: vw(20);
          width: 90%;
          height: vh(40);
        }
        .work-name {
          font-size: vw(16);
          width: 90%;
          height: vh(40);
          margin: -19px 0 -26px 0;
        }
        .more-item {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          flex-wrap: wrap;
          font-size: vw(16);
        }
        .kuang {
          border: 1px solid #00acc4;
          background-color: #e7f4fe;
          border-radius: 8px;
          height: vh(90);
          width: calc(90% - 40px);
          padding: vw(10) vw(20) vw(10) vw(20);
        }
        .cailiao {
          height: vh(40);
        }
        .people {
          width: 90%;
          height: vh(30);
          p {
            margin-left: - vw(60);
          }
        }

        .address {
          color: black;
          width: 90%;
          height: vh(70);
          display: flex;
          line-height: 25px;
          align-items: flex-start;

          i {
            width: vw(30);
            height: vh(30);
            border: none;
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .info-box-point {
      background-color: white;
      height: vh(600);

      .info {
        height: vh(160);
        color: black;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .item {
          background-color: #e7f4fe;
          width: vw(180);
          height: vh(90);
          border: 1px solid #00acc4;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          border-radius: 7px;

          .name {
            font-size: vw(18);
          }

          span {
            display: flex;
            align-items: center;
            font-size: 18px;
            color: #ABABAB;
            font-weight: 1000;

            :first-child {
              color: #00acc4;
              font-size: vw(25);
            }
          }
        }
      }

      .chart {
        display: flex;
        justify-content: center;
        height: vh(40);
        border-bottom: 1px solid #CFCFCF;

        .el-radio__label {
          font-size: vw(18);
        }

        .el-radio__inner {
          width: 18px;
          height: 18px;
        }
      }

      #chart-content {
        width: vw(400);
        height: vh(400);
        margin: 0 0 0 vh(20);
      }
    }
  }
}

.el-input__inner::-webkit-input-placeholder {
  color: black;
  font-size: vh(16);
}

.info-box-main::-webkit-scrollbar {
  width: 8px;
}

.info-box-main::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #CFCFCF;
}

.info-box-main::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgb(243, 240, 242);
}
</style>